<template>
  <div class="chart-container">
    <div id="bubbleChart" class="chart-wrapper"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  const chartDom = document.getElementById('bubbleChart');
  if (!chartDom) {
    console.error('图表容器不存在');
    return;
  }

  const myChart = echarts.init(chartDom);

  // 城市和维度配置
  const cities = ['重庆', '成都', '武汉', '合肥', '苏州', '广州'];
  const dimensions = ['软件著作权', '发明专利', '注册商标', '作品著作权'];
  
  // 优化的渐变色方案 - 每个维度使用从浅到深的渐变
  const dimensionGradients = [
    {
      type: 'linear',
      x: 0, y: 0, x2: 1, y2: 1,
      colorStops: [{ offset: 0, color: 'rgba(51, 102, 204, 0.8)' }, { offset: 1, color: 'rgba(51, 102, 204, 0.5)' }]
    },
    {
      type: 'linear',
      x: 0, y: 0, x2: 1, y2: 1,
      colorStops: [{ offset: 0, color: 'rgba(220, 57, 18, 0.8)' }, { offset: 1, color: 'rgba(220, 57, 18, 0.5)' }]
    },
    {
      type: 'linear',
      x: 0, y: 0, x2: 1, y2: 1,
      colorStops: [{ offset: 0, color: 'rgba(255, 153, 0, 0.8)' }, { offset: 1, color: 'rgba(255, 153, 0, 0.5)' }]
    },
    {
      type: 'linear',
      x: 0, y: 0, x2: 1, y2: 1,
      colorStops: [{ offset: 0, color: 'rgba(16, 150, 24, 0.8)' }, { offset: 1, color: 'rgba(16, 150, 24, 0.5)' }]
    }
  ];

  // 所有城市数据
  const bubbleData = [
    // 重庆
    [0, 0, 2467, '重庆', '软件著作权'],
    [0, 1, 1319, '重庆', '发明专利'],
    [0, 2, 3288, '重庆', '注册商标'],
    [0, 3, 847, '重庆', '作品著作权'],
    
    // 成都
    [1, 0, 2441, '成都', '软件著作权'],
    [1, 1, 1568, '成都', '发明专利'],
    [1, 2, 3571, '成都', '注册商标'],
    [1, 3, 949, '成都', '作品著作权'],
    
    // 武汉
    [2, 0, 2019, '武汉', '软件著作权'],
    [2, 1, 1262, '武汉', '发明专利'],
    [2, 2, 3006, '武汉', '注册商标'],
    [2, 3, 753, '武汉', '作品著作权'],
    
    // 合肥
    [3, 0, 2649, '合肥', '软件著作权'],
    [3, 1, 1649, '合肥', '发明专利'],
    [3, 2, 3814, '合肥', '注册商标'],
    [3, 3, 951, '合肥', '作品著作权'],
    
    // 苏州
    [4, 0, 3061, '苏州', '软件著作权'],
    [4, 1, 1873, '苏州', '发明专利'],
    [4, 2, 5231, '苏州', '注册商标'],
    [4, 3, 1178, '苏州', '作品著作权'],
    
    // 广州
    [5, 0, 2576, '广州', '软件著作权'],
    [5, 1, 1406, '广州', '发明专利'],
    [5, 2, 3694, '广州', '注册商标'],
    [5, 3, 944, '广州', '作品著作权']
  ];

  // 计算最大值
  const maxValue = Math.max(...bubbleData.map(item => item[2]));
  // 计算最小值
  const minValue = Math.min(...bubbleData.map(item => item[2]));

  // 图表配置
  const option = {
    title: {
      text: '知识产权城市对比',
      subtext: '单位：项',
      left: 'center',
      top: 10,
      textStyle: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#333'
      },
      subtextStyle: {
        fontSize: 14,
        color: '#666',
        padding: [10, 0, 0, 0]
      }
    },
    tooltip: {
      trigger: 'item',
      padding: 12,
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#eee',
      borderWidth: 1,
      borderRadius: 6,
      boxShadow: '0 3px 10px rgba(0, 0, 0, 0.1)',
      textStyle: { color: '#333', fontSize: 14 },
      formatter: (params: any) => {
        if (!params || !params.value) return '';
        return `
          <div style="font-weight: bold; margin-bottom: 5px;">${params.value[3]}</div>
          <div>${params.value[4]}: <span style="font-weight: bold;">${params.value[2]}项</span></div>
        `;
      }
    },
    legend: {
      data: dimensions,
      bottom: 20,
      left: 'center',
      itemWidth: 14,
      itemHeight: 14,
      textStyle: {
        fontSize: 13,
        color: '#555'
      },
      itemGap: 15,
      padding: [10, 20]
    },
    grid: {
      left: '12%',
      right: '8%',
      bottom: '22%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: cities,
      name: '',
      nameLocation: 'middle',
      nameGap: 40,
      nameTextStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333'
      },
      axisLine: { 
        lineStyle: { 
          color: '#666',
          width: 1.5
        } 
      },
      axisTick: { 
        show: true,
        lineStyle: {
          color: '#666'
        }
      },
      axisLabel: {
        rotate: 30,
        interval: 0,
        fontSize: 14,
        color: '#333',
        margin: 15
      }
    },
    yAxis: {
      type: 'category',
      data: dimensions,
      name: '',
      nameLocation: 'middle',
      nameGap: 60,
      nameTextStyle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333'
      },
      axisLine: { 
        lineStyle: { 
          color: '#666',
          width: 1.5
        } 
      },
      axisTick: { 
        show: true,
        lineStyle: {
          color: '#666'
        }
      },
      axisLabel: {
        fontSize: 14,
        color: '#333',
        margin: 15
      }
    },
    series: [
      {
        type: 'scatter',
        data: bubbleData,
        // 更精细的气泡大小计算
        symbolSize: (data: any) => {
          if (!data || !Array.isArray(data)) return 20;
          
          // 使用对数缩放让大小差异更合理
          const logValue = Math.log(data[2] - minValue + 1);
          const logMax = Math.log(maxValue - minValue + 1);
          let baseSize = (logValue / logMax) * 70 + 20;
          
          // 根据数值位数调整最小尺寸
          const valueStr = data[2].toString();
          const minSize = Math.max(30, valueStr.length * 12);
          
          return Math.max(minSize, Math.min(90, baseSize));
        },
        // 气泡标签优化
        label: {
          show: true,
          position: 'inside',
          formatter: (params: any) => params.value[2],
          fontSize: 13,
          color: '#fff',
          fontWeight: 'bold',
          // 添加文字阴影增强可读性
          textShadowBlur: 2,
          textShadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        // 气泡样式优化 - 使用渐变和精致边框
        itemStyle: {
          color: (params: any) => {
            if (!params || !params.value) return '#ccc';
            return dimensionGradients[params.value[1]] || '#ccc';
          },
          // 双层边框效果
          borderColor: 'rgba(255, 255, 255, 0.8)',
          borderWidth: 2,
          // 精致阴影
          shadowBlur: 8,
          shadowColor: 'rgba(0, 0, 0, 0.25)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        },
        // 鼠标悬停动画效果
        emphasis: {
          itemStyle: {
            shadowBlur: 15,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowOffsetX: 3,
            shadowOffsetY: 3,
            borderWidth: 3,
            borderColor: 'rgba(255, 255, 255, 1)'
          },
          // 标签放大效果
          label: {
            fontSize: 15,
            textShadowBlur: 3
          },
          // 添加缩放动画
          scale: true,
          scaleSize: 5
        },
        // 气泡绘制动画
        animationDuration: 1500,
        animationEasing: 'elasticOut'
      }
    ]
  };

  myChart.setOption(option);

  // 响应窗口大小变化
  const handleResize = () => {
    myChart.resize();
  };
  
  window.addEventListener('resize', handleResize);
  
  // 组件卸载时清理
  window.addEventListener('beforeunload', () => {
    window.removeEventListener('resize', handleResize);
    myChart.dispose();
  });
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  min-width: 700px;
  padding: 20px;
  box-sizing: border-box;
}

.chart-wrapper {
  width: 100%;
  height: 700px;
}
</style>
